<template>
	<view class="content">
		<view class="header-title">
			<image :src="proxy.serverimageUrl + 'activty/topbg.png'" mode=""></image>
			<p class="p1">动态</p>
		</view>
		<z-paging :paging-style="{height: '87vh'}" default-page-no="1" default-page-size="10" :fixed="false"
			ref="paging" v-model="dataList" @query="queryList">
			<view class="card" v-for="(item,index) in dataList" :key="index">
				<view class="card-header" @click="gomenber(item.mid)">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<view class="card-header-right">
						<view class="title-name">
							<view class="nametext">
								{{item.memberName}}
							</view>
							<image v-if="item.employmentSituation == '会长'" :src="proxy.serverimageUrl+'member/1.png'"
								mode=""></image>
							<image v-if="item.employmentSituation == '副会长'" :src="proxy.serverimageUrl+'member/2.png'"
								mode=""></image>
							<image v-if="item.employmentSituation == '理事'" :src="proxy.serverimageUrl+'member/3.png'"
								mode=""></image>
							<image v-if="item.employmentSituation == '会员'" :src="proxy.serverimageUrl+'member/4.png'"
								mode=""></image>
							<image v-if="item.employmentSituation == '监事长'" :src="proxy.serverimageUrl+'member/5.png'"
								mode="">
							</image>
							<image v-if="item.employmentSituation == '秘书长'" :src="proxy.serverimageUrl+'member/6.png'"
								mode="">
							</image>
							<image v-if="item.employmentSituation == '监事'" :src="proxy.serverimageUrl+'member/7.png'"
								mode="">
							</image>
						</view>
						<view class="companyname">
							{{item.workUnit}}
						</view>
					</view>
				</view>
				<view class="card-content">
					<view class="card-content-text">
						{{item.trendsContent}}
					</view>
					<view class="imageBox" v-if="item.commonFileRequests && item.commonFileRequests.length > 0">
						<image class="image" v-for="(t,i) in item.commonFileRequests" :key="index" :src="t.url" mode="">
						</image>

					</view>
				</view>
				<view class="kong-line">

				</view>
				<view class="Timesharing">
					<view class="text-date">
						发布于 {{item.releaseTime}}
					</view>
					<button class="iconbox" @click.stop open-type="share" :id="item.tid">
						<image :src="proxy.serverimageUrl + 'activty/fenxiang.png'" mode=""></image>
						<p style="background-color: #fff;" class="text">分享</p>
						<!-- <button style="margin-left: 20rpx;" @click="sharechange" open-type="share" :data-shareInfo='shareInfo' class="btn1">分享名片</button> -->
					</button>
					<view class="iconbox" @click="addlike(item.tid,item.likeStatus,index)">
						<image v-if="!item.likeStatus" :src="proxy.serverimageUrl + 'activty/zan.png'" mode=""></image>
						<image v-if="item.likeStatus" :src="proxy.serverimageUrl + 'activty/zan1.png'" mode=""></image>
						<p class="text">赞</p>
					</view>
				</view>
				<view class="peoplelist" @click="querylikelist(item.tid)">
					<view class="listbox">
						<image v-for="(item,index) in item.avatars" :key="index" class="image-avatar" :src="item"
							mode=""></image>
					</view>
					<view class="righttext">
						{{item.avatars.length}}人赞
					</view>
				</view>
			</view>
			<view class="release" @click="godetail">
				<image :src="proxy.serverimageUrl + 'activty/fabu.png'" mode=""></image>
			</view>
		</z-paging>
		<up-popup :show="popshow" :round="10" @close="popclose" closeOnClickOverlay>
			<view class="scrviecontent">
				<p class="poptitle">点赞的人</p>
				<scroll-view scroll-y="true" class="scrollView">
					<view class="itembox" v-for="(item,index) in likelist" :key="index">
						<view class="item-left">
							<view class="image-avatar">
								<image :src="item.avatar" mode=""></image>
							</view>
							<view class="textbox">
								<view class="nametext">
									<view class="name">
										{{item.memberName}}
									</view>
									<image v-if="item.employmentSituation == '会长'"
										:src="proxy.serverimageUrl+'member/1.png'" mode=""></image>
									<image v-if="item.employmentSituation == '副会长'"
										:src="proxy.serverimageUrl+'member/2.png'" mode=""></image>
									<image v-if="item.employmentSituation == '理事'"
										:src="proxy.serverimageUrl+'member/3.png'" mode=""></image>
									<image v-if="item.employmentSituation == '会员'"
										:src="proxy.serverimageUrl+'member/4.png'" mode=""></image>
									<image v-if="item.employmentSituation == '监事长'"
										:src="proxy.serverimageUrl+'member/5.png'" mode="">
									</image>
									<image v-if="item.employmentSituation == '秘书长'"
										:src="proxy.serverimageUrl+'member/6.png'" mode="">
									</image>
									<image v-if="item.employmentSituation == '监事'"
										:src="proxy.serverimageUrl+'member/7.png'" mode="">
									</image>
								</view>
								<p class="corporatename">{{item.workUnit}}</p>
								<p class="corporatename">访问时间：{{item.createTime}}</p>
							</view>
						</view>
						<view class="item-right">
							<up-button @click="gomenber(item.mid)" text="访问" shape="circle" color="#2854B7"></up-button>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<Mysquare ref="ShareCanvas" />
	</view>
</template>

<script setup>
	import Mysquare from '../../components/square.vue'
	import {
		defineProps,
		getCurrentInstance,
		ref
	} from 'vue'
	import {
		trendslist,
		likeOrCancelLike,
		likeList,
		shareSquare
	} from '../../utils/api.js'
	import {
		onLoad,
		onReady,
		onShareAppMessage,
		onShow
	} from '@dcloudio/uni-app';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	const otid = ref('')
	onLoad((o) => {
		if (o.tid) {
			otid.value = o.tid
		}
	})
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const ShareCanvas = ref(null)
	/*列表组件ref*/
	const paging = ref(null)
	/*列表数据*/
	const dataList = ref([])
	/*请求列表数据方法*/
	const queryList = (pageNo, pageSize) => {
		let params = {
			pageNum: pageNo,
			pageSize: pageSize,
			mid: uni.getStorageSync('mid')
		}
		trendslist(params).then(res => {
			if (res.code == 200) {
				const list = res.rows
				if (otid.value) {
					console.log(otid.value);
					const item = res.rows.find(p => p.tid == otid.value)
					console.log(item);
					list.unshift(item)
				}
				paging.value.complete(list)
			}
		}).catch(res => {
			paging.value.complete(false)
		})
	}
	/*点赞列表的数据*/
	const popshow = ref(false)
	const popclose = () => {
		popshow.value = false
	}
	const querylikelistdata = ref({
		pageNum: 1,
		pageSize: 10,
		tid: null
	})
	// const shareInfo = ref({
	// 	title: '会员分享',
	// 	path: '/pages/square/index', // 分享路径
	// 	imageUrl: '', // 分享图片
	// 	desc: '',
	// 	content: ''
	// })
	onShareAppMessage(async (res) => {
		console.log('动态分享分享', res)
		// const { id, title, avatar, nickname, productDetailList } = detailInfo
		if (res.target && res.target.id) { // 分享商品
			console.log('分享商品');
			console.log(dataList);
			const item = dataList.value.find(p => p.tid == res.target.id) || {}
			console.log(item);
			try {
				uni.showLoading({
					title: '分享信息生成中',
					mask: true
				})
				console.log(ShareCanvas.value);
				const imageUrl = await ShareCanvas.value.setOrderCanvas({
					...item
				}) // 用不同的画布画样式，就调对应的方法名，注意里面需要的参数要传对
				console.log(imageUrl);
				uni.hideLoading()
				return {
					title: '动态分享',
					path: '/pages/square/index?tid=' + res.target.id, // 这里是你的分享里面的跳转地址
					imageUrl: imageUrl || ''
				}
			} catch (error) {
				uni.hideLoading()
				console.log(error);
			}
		}
	})
	/*查询点赞列表*/
	const likelist = ref([])
	const querylikelist = (tid) => {
		querylikelistdata.value.tid = tid
		popshow.value = true
		likeList(querylikelistdata.value).then(res => {
			likelist.value = res.rows
		})
	}
	/*点赞方法*/
	const addlike = (tid, likeStatus, index) => {
		let params = {
			mid: uni.getStorageSync('mid'),
			tid: tid,
			type: likeStatus == 1 ? '2' : '1'
		}
		likeOrCancelLike(params).then(res => {
			if (res.code == 200) {
				dataList.value.splice(index, 1, res.data)
			} else if (res.code == 500) {
				uni.showToast({
					title: '请先登录',
					duration: 1000,
					icon: 'error'
				})
			}
		})
	}
	/*跳转会员详情*/
	const gomenber = (mid) => {
		uni.navigateTo({
			url: '/subpages/memberdetail/index?mid=' + mid
		})
	}
	/*分享时调用接口*/
	const sharechange = (item) => {

	}
	/*跳转发布动态详情*/
	const godetail = (item) => {
		if (uni.getStorageSync('mid') == '') {
			uni.showToast({
				title: '请先登录',
				duration: 1000,
				icon: 'error'
			})
			return
		} else {
			uni.navigateTo({
				url: '/subpages/squaredetail/index'
			})
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		width: 100vw;
		padding: 180rpx 0rpx 0;
		position: relative;
		background: #ECEFF9;

		.header-title {
			position: absolute;
			top: 0;
			width: 100%;
			height: 374rpx;

			image {
				width: 100%;
				height: 374rpx;
			}

			.p1 {
				font-family: Alibaba PuHuiTi;
				font-weight: bold;
				font-size: 36rpx;
				color: #202020;
				position: absolute;
				top: 114rpx;
				left: 40rpx;
			}
		}

		::v-deep .zp-paging-container-content {
			padding: 10rpx 40rpx;
			margin-top: 20rpx;
		}

		.card {
			width: 100%;
			// height: 812px;
			// margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.card-header {
				display: flex;
				align-items: center;

				.avatar {
					border-radius: 50%;
					width: 90rpx;
					height: 90rpx;
				}

				.card-header-right {
					margin-left: 18rpx;

					.title-name {
						display: flex;
						align-items: center;

						.nametext {
							font-family: Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 34rpx;
							color: #252525;
						}

						image {
							width: 104rpx;
							height: 43rpx;
							margin-left: 14rpx;
						}
					}

					.companyname {
						margin-top: 8rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #BBC0CA;
					}
				}
			}

			.card-content {
				margin-top: 35rpx;

				.card-content-text {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 30rpx;
					color: #202020;
				}

				.imageBox {
					margin-top: 35rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.image {
						margin-right: 20rpx;
						width: 188rpx;
						height: 188rpx;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
					}

					.image:nth-child(3n) {
						margin-right: 0;
					}
				}
			}

			.kong-line {
				width: 610rpx;
				height: 1rpx;
				background-color: #f1f1f1;
			}

			.Timesharing {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				button:after {
					border: none
				}

				.text-date {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #5D5D5D;
				}

				.iconbox {
					display: flex;
					align-items: center;
					background-color: white;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					button:after {
						border: none;
					}

					.text {
						margin-left: 14rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						color: #5D5D5D;
					}
				}
			}

			.peoplelist {
				padding: 14rpx 20rpx;
				background: #F5F5F5;
				margin-top: 20rpx;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.listbox {
					.image-avatar {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}

					.image-avatar:nth-child(n+2) {
						margin-left: -30rpx;
					}
				}

				.righttext {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 26rpx;
					color: #5D5D5D;
				}
			}
		}

		.release {
			position: fixed;
			bottom: 266rpx;
			right: 40rpx;

			image {
				width: 164rpx;
				height: 164rpx;
			}
		}

		.scrviecontent {
			padding: 55rpx 40rpx;

			.poptitle {
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				color: #202020;
			}

			.scrollView {
				.itembox {
					margin-top: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-left {
						display: flex;
						align-items: center;

						.image-avatar {
							width: 118rpx;
							height: 118rpx;
							border-radius: 50%;

							image {
								width: 118rpx;
								height: 118rpx;
								border-radius: 50%;
							}
						}

						.textbox {
							margin-left: 28rpx;

							.nametext {
								display: flex;
								align-items: center;

								.name {
									font-family: Alibaba PuHuiTi;
									font-weight: 500;
									font-size: 34rpx;
									color: #252525;
								}

								image {
									margin-left: 18rpx;
									width: 104rpx;
									height: 43rpx;
								}
							}

							.corporatename {
								margin-top: 18rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #BBC0CA;
							}
						}
					}

					.item-right {
						width: 140rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
</style>